/*
*转入界面
*
*/

<style scoped lang="less">
.fot26{
  font-size: .26rem;
  vertical-align: middle;
}
.shiftIn{
  width: 100%;
  height: 13.34rem;
  background: #f7f8fa;
  font-size: .26rem;
  .message{
    font-size:0.23rem;
    line-height: 0.76rem;
    padding-left: 0.29rem;
    color: #333;
  }
  .main{
    background: #fff;
  }
  .sure{
    line-height:0.88rem;
    width:6.9rem;
    margin-left: 0.3rem;
    margin-top: 0.49rem;
    background: #EC1B30;
    font-size: 0.3rem;
    border-radius: 0.06rem;
    color: white;
    &.forbiden{
      opacity: .5;
    }
  }
  .moneyIpt{
    overflow: hidden;
    height: 1.4rem;
    font-size: 0.35rem;
    padding-left: 0.32rem;
  }
  .cell{
    font-size: 0.26rem;
    color: #333;
  }
  .select{
    position: relative;
    display: inline-block;
    width: 0.28rem;
    height: 0.28rem;
    border: 1px solid #bfbfbf;
    margin-left:0.6rem;
    margin-right:0.23rem;
    vertical-align: top;
    &>img{
      position:absolute;
      top: 0px;
      left: 0px;
      width: 100%;
    }
  }
  .tip{
    border-top: 1px solid #ddd;
    font-size: 0.21rem;
    color: #999;
    line-height: 0.88rem;
    padding-left: 0.3rem;
    .num{
      margin-left: .13rem;
      margin-right: .65rem;
      color: #333;
    }
  }
  .warming{
    margin-top: 0.34rem;
    margin-left: 0.5rem;
    font-size: 0.21rem;
    color: #999;
    &>li{
      line-height: 0.4rem;
    }
  }
  .deal{
    margin-top: 0.28rem;
    padding-left: 0.3rem;
    overflow: hidden;
    &>p{
      float: left;
      width:6.43rem;
      font-size:0.22rem;
      line-height: 0.35rem;
      color: #ccc;
      .dealCheck{
        color: #3333ff;
      }
    }
    &>i{
      float: left;
      margin-left: 0px;
      margin-right: 0.15rem;
      &>img{
        vertical-align: top;
        width: 100%;
        height: auto;
      }
    }
  }
  .inputSec{
    font-size: 0.26rem;
    height: 6.4rem;
    border-radius: 0.3rem 0.3rem 0px 0px;
    background: #fff;
    text-align: center;
    &>header{
      position: relative;
      line-height: 0.88rem;
      border-bottom: 1px solid #ddd;
      &>.worry{
        position: absolute;
        top: 0.3rem;
        left: 0.3rem;
        width: 0.28rem;
        height: 0.28rem;
        background: url("../../assets/img/Financial/worry.png") no-repeat 50% 50%;
      }
    }
    .title{
      color: #999;
      font-size: .26rem;
      margin: .56rem 0px;
    }
    .num{
      font-size: .56rem;
      color: #ff6633;
    }
    &>ul{
      overflow: hidden;
      width: 3.72rem;
      margin: 0 auto;
      li{
        list-style:none;
        float: left;
        width: .4rem;
        height: .5rem;
        border-bottom: 1px solid #ccc;
        margin: 0px .11rem;
        &>input{
          border-style: none;
          width: 100%;
          height: 100%;
          text-align: center;
          outline: none;
          font-size: .3rem;
        }
      }
    }
  }
}
</style>

<template>
  <div class="shiftIn">
    <x-header :right-options="{showMore: true}" :left-options="{preventGoBack: true}" @on-click-back="back" @on-click-more="showMenus = true">转入</x-header>
    <p class="message">{{FinancialName}}</p>
    <group label-width="1.5rem" class="main">
      <!-- <cell>
        <p slot="title"  class="cell">钞汇标识</p>
        <div class="select" @click="cashClick" style="vertical-align: middle;">
          <img src="../../assets/img/Financial/selected.png" alt="" v-if="cash == 1">
        </div><span class="fot26">钞</span>
        <div class="select" @click="orderClick" style="vertical-align: middle;">
          <img src="../../assets/img/Financial/selected.png" alt="" v-if="cash == 0">
        </div><span class="fot26" style="margin-right:.25rem;">汇</span>
      </cell>
      <cell>
        <p slot="title"  class="cell">付款账户</p>
        <popup-radio :options="options1" :placeholder="options1[0]" class="cell">
      </popup-radio>
      </cell>
      <cell>
        <p slot="title" class="cell">账户余额</p>
        <p slot="value" class="cell">{{rest}}</p>
      </cell> -->
      <cell title="钞汇标识" class="cell">
        <div>
          <div class="select" @click="cashClick" style="vertical-align: middle;">
            <img src="../../assets/img/Financial/selected.png" alt="" v-if="cash == 1">
          </div><span class="fot26">钞</span>
          <div class="select" @click="orderClick" style="vertical-align: middle;">
            <img src="../../assets/img/Financial/selected.png" alt="" v-if="cash == 0">
          </div><span class="fot26">汇</span>
        </div>
      </cell>
      <cell title="付款账户" class="cell">
        <popup-radio :options="options1" :placeholder="options1[0]"></popup-radio>
      </cell>
      <cell title="账户余额" class="cell">
        {{rest}}
      </cell>
    </group>
    <group>
      <x-input title="￥" placeholder="10000.00元起购,递增500.00元" class="moneyIpt" @on-change="iptCash"></x-input>
      <div class="tip"><span>预期收益金额</span><span class="num">200</span><span>手续费</span><span class="num">20</span></div>
    </group>
    <ul class="warming">
      <li>提示内容（业务提供）</li>
      <li>提示内容（业务提供）</li>
    </ul>
    <x-button @click.native="iptSec = true" plain type="primary" class="sure" :class="{'forbiden':iptOk == true}" :disabled="iptOk">确认转入</x-button>
    <popup v-model="iptSec" position="bottom" max-height="50%">
      <div class="inputSec">
        <header><x-button @click.native="iptSec = false" plain type="primary" class="worry"></x-button><span>付款</span></header>
        <p class="title">支付金额</p>
        <p class="num">￥{{getCashNum}}</p>
        <p class="title" style="margin-bottom:10px;">输入支付密码</p>
        <ul>
          <li v-for="item in 6" :key="item"><input type="text" maxlength="1"></li>
        </ul>
      </div>
    </popup>
    <x-button @click.native="sureToBuy" plain type="primary" class="sure">测试</x-button>
    <div class="deal">
      <i class='select' @click='usaClick'><img src="../../assets/img/Financial/selected.png" alt="" v-show="USA"></i>
      <p>个人客户非美国纳税居民身份</p>
    </div>
    <div class="deal">
      <i class='select' @click='forginClick'><img src="../../assets/img/Financial/selected.png" alt="" v-show="forgin"></i>
      <p>外籍人士中国居民身份</p>
    </div>
    <div class="deal">
      <i class='select' @click='readClick'><img src="../../assets/img/Financial/selected.png" alt="" v-show="readOver"></i>
      <p>本人已经认真阅读并充分理解<a href="javascript:void(0)" class="dealCheck">《产品指南/条款及章则》</a> （含风险提示书）、<a href="javascript:void(0)" class="dealCheck">《投资协议》</a>、<a href="javascript:void(0)" class="dealCheck">《客户权益须知》</a>、<a href="javascript:void(0)" class="dealCheck">《在售个人理财产品系列清单》</a>的条款与内容,充分了解并清楚知晓本产品的风险，愿意承担相关风险。</p>
    </div>
    <!-- <p @click="gotoDetail ('FinancialBuySure')">跳转确认购买页</p> -->
  </div>
</template>

<script>

export default {
  data () {
    return {
      FinancialName: '“芙蓉景程，汇得益”2018年03月',
      options1: ['5766****666', '8977****4566', '0987*****987'],
      rest: '6000元',
      cash: 0, // 1代表选择钞，0代表选择汇
      USA: 0, // 代表美国人
      forgin: 0, // 代表外籍华裔
      readOver: 1, // 我已阅读协议
      iptSec: false, // 控制底部弹出层显隐
      iptOk: true, // 控制按钮可否点击
      getCashNum: null, // 输入的金额值
      repose: [] // 接收请求返回数据
    }
  },
  methods: {
    cashClick: function (e) {
      let n = this.cash
      if (n === 0) {
        this.cash = 1
      }
    },
    orderClick: function (e) {
      let n = this.cash
      if (n === 1) {
        this.cash = 0
      }
    },
    readClick: function (e) {
      let n = this.readOver
      if (n === 1) {
        this.readOver = 0
      } else {
        this.readOver = 1
      }
    },
    usaClick: function (e) {
      let n = this.USA
      if (n === 1) {
        this.USA = 0
      } else {
        this.USA = 1
      }
    },
    forginClick: function () {
      let n = this.forgin
      if (n === 1) {
        this.forgin = 0
      } else {
        this.forgin = 1
      }
    },
    iptCash: function (e) {
      if (e) {
        this.iptOk = false
        this.getCashNum = e
      } else {
        this.iptOk = true
      }
    },
    sureToBuy () {
      // let _this = this
      // window.WebViewJavascriptBridge.callHandler('nativeRequest',
      //   JSON.stringify({'requstSource': 'internetRequest', 'url': 'http://whichat.icitic.net/mstep/mstep.do?act=business', 'params': {'method_Name': 'M0401010', 'user_Data': {'PayAccount': '6217298009765555', 'BuyAmt': '2001'}}}),
      //   function (response) {
      //     response = JSON.parse(response)
      //     if (response.status === 0 || response.status === '0') {
      //       _this.prdList = response.data.data
      //     } else {
      //       _this.aaa = response.data.data
      //     }
      //   })
      this.$router.push({name: 'FinancialBuySure', query: {'PayAccount': '6217298009765555', 'BuyAmt': '2001'}})
    },
    back () {
      this.$router.isBack = true
      this.$router ? this.$router.back() : window.history.back()
      // console.log(this.$router.isBack)
    }
  }
}
</script>
